<template>
  <div>
    <!-- <h1>hello vue</h1> -->
    <!-- 导航 -->
    <router-link to="/find">发现音乐</router-link> |
    <router-link to="/my">我的音乐</router-link>
    <!-- 7、设置挂载点 -->
    <router-view></router-view>
  </div>
</template>

<script>
/***
 * router-link提供的两个激活类名的区别
 * router-link-exact-active: (精确匹配) 浏览器地址栏url中路径，和导航a标签中href属性的值完成相同的时候，则给该a标签添加此类名
 * router-link-active: (模糊匹配) 浏览器地址URL中的路径包含导航a标签中的href属性的值的时候，则给改a标签添加此类名
 * 
 * 使用场景：
 *  router-link-active：设置一级导航的高亮效果
 *  router-link-exact-active：设置二级导航的高亮效果
 *
 */ 
export default {

}
</script>

<style scoped>
/* // 设置一级导航高亮效果 */
.router-link-active{
  color: pink;
  background: yellow;
}
</style>